<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-card :bordered="false">
      <h3>社区基础配置</h3>
      <a-tabs v-model="activeKey" @change="tabChange">
        <a-tab-pane v-for="item in brandList" :tab="item.name" :key="item.weid"> </a-tab-pane>
      </a-tabs>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 6 }, sm: { span: 8 } }" :wrapperCol="{ lg: { span: 14 }, sm: { span: 16 } }">
        <a-form-model-item label="社区首页标题" prop="homeTitle">
          <a-input v-model.trim="form.homeTitle" placeholder="" allowClear />
        </a-form-model-item>
        <a-form-model-item label="社区欢迎页" required>
          <JImageUpload
            :isMove="false"
            :uploadParams="getUploadParams()"
            :isMultiple="true"
            :fileSize="10"
            :number="1"
            :accept="'image/*'"
            @fileChange="fileHomeImageChange"
            v-model="homeImageList"
          ></JImageUpload>
          <div>1125*1920px，支持jpg、png、gif图片格式</div>
        </a-form-model-item>
        <a-form-model-item label="社区发布按钮" prop="control">
          <a-radio-group v-model="form.control">
            <a-radio :value="true">显示</a-radio>
            <a-radio :value="false">隐藏</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="社区用户协议" prop="userAgreement">
          <a-textarea v-model.trim="form.userAgreement" :maxLength="userAgreementLimit" placeholder="" :rows="8" allowClear />
          <div style="text-align: right;">{{ `${userAgreementNumber}/${userAgreementLimit}` }}</div>
          <!-- <j-editor ref="jEditor" :toolbar="toolbar" v-model="form.userAgreement" /> -->
        </a-form-model-item>
        <a-form-model-item label="分享设置">配置社区首页分享小程序卡片信息</a-form-model-item>
        <a-form-model-item label="小程序分享卡片图" required>
          <JImageUpload
            :isMove="false"
            :uploadParams="getUploadParams()"
            :isMultiple="true"
            :fileSize="10"
            :number="1"
            :accept="'image/*'"
            @fileChange="fileSharePhotosChange"
            v-model="sharePhotosList"
          ></JImageUpload>
          <div>500*400px，支持jpg、png图片格式</div>
        </a-form-model-item>
        <a-form-model-item label="小程序分享标题" prop="shareTitle">
          <a-textarea v-model.trim="form.shareTitle" :maxLength="36" placeholder="小程序分享卡片展示的标题文案，最多36个字" :rows="4" allowClear />
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <!-- <a-button style="margin-right: 8px" @click="handleBack">取消</a-button> -->
          <a-button htmlType="submit" @click="handleSubmit" type="primary">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-spin>
</template>
<script>
import JImageUpload from '../../components/JImageUpload'
// import JEditor from '@/components/jeecg/JEditor'
import { addUpdateConfig, configList, switchControl, findButtonSwitch } from '@/api/micromall/configManagement'
import { brandList } from '../../components/brandList.js'

export default {
  components: {
    JImageUpload,
    // JEditor
  },
  data() {
    return {
      userAgreementLimit: 5000,
      userAgreementNumber: 0,
      toolbar: ['styleselect forecolor| bullist numlist | underline strikethrough'],
      activeKey: brandList[0].weid,
      brandList,
      homeImageList: [],
      sharePhotosList: [],
      spinning: false,
      form: {
        userAgreement: '',
        control: true
      },
      rules: {
        homeTitle: [{ required: true, message: '请输入', trigger: 'blur' }],
        shareTitle: [{ required: true, message: '请输入', trigger: 'blur' }],
        userAgreement: [{ required: true, message: '请输入', trigger: 'blur' }],
        control: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  watch: {
    form: {
      handler: function () {
        const _this = this
        _this.userAgreementNumber = _this.form.userAgreement && _this.form.userAgreement.length ? _this.form.userAgreement.length : 0
      },
      deep: true
    }
  },
  created() {
    this.getDetails()
  },
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    tabChange(activeKey) {
      this.$nextTick(() => {
        this.activeKey = activeKey
        this.$refs.rulesForm.resetFields()
        this.getDetails()
      })
    },

    
    // 获取小程序按钮开关控制
    getFindButtonSwitch() {
      const data = {
        brandId: this.activeKey
      }
      findButtonSwitch(data)
        .then(res => {
          if (res.code === 200) {
            const control = res.data == 'true' ? true : false
            this.$set(this.form, 'control', control)
          } else {
           this.$message.error(res.msg || res.message)
          }
        })
    },

    
    // 小程序按钮开关控制
    getSwitchControl() {
      const data = {
        brandId: this.activeKey,
        control: this.form.control
      }
      switchControl(data)
        .then(res => {
          if (res.code === 200) {
          } else {
           this.$message.error(res.msg || res.message)
          }
        })
    },

    // 获取详情
    getDetails() {
      const data = {
        weId: this.activeKey
      }
      this.spinning = true
      configList(data)
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            const { homeImage, sharePhotos } = res.data
            this.form = {
              ...res.data
            }
            this.homeImageList = homeImage ? [homeImage] : []
            this.sharePhotosList = sharePhotos ? [sharePhotos] : []
            this.getFindButtonSwitch()
          } else {
           this.$message.error(res.msg || res.message)
          }
        })
        .catch(err => { this.spinning = false})
    },

    getUploadParams() {
      return {
        actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
        headers: {
          authorization: 'authorization-text'
        },
        uploadHost: 'https://img.bzhz.jnbygroup.com/'
      }
    },

    // 社区欢迎页
    fileHomeImageChange(list) {
      this.form.homeImage = list.length ? list[0].url : ''
    },

    // 小程序分享卡片图
    fileSharePhotosChange(list) {
      this.form.sharePhotos = list.length ? list[0].url : ''
    },

    // 保存
    handleSubmit() {
      
      // console.log(this.$refs.jEditor, 'this.$refs.jEditor')
      // return
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const { homeImage, sharePhotos, userAgreement } = this.form
          if (!homeImage) {
            this.$message.error('请上传社区欢迎页！')
            return
          }
          // if (!userAgreement) {
          //   this.$message.error('请填写社区用户协议！')
          //   return
          // }
          // if (userAgreement.length > 5000) {
          //   this.$message.error('社区用户协议字数超出限制！')
          //   return
          // }
          if (!sharePhotos) {
            this.$message.error('请上传小程序分享卡片图！')
            return
          }
         const data = {
            ...this.form,
            weId: this.activeKey
         }
          this.spinning = true
          addUpdateConfig(data).then(res => {
            if (res.code === 200) {
              this.getSwitchControl()
              this.$message.success(res.msg || res.message)
              this.getDetails()
            } else {
              this.$message.error(res.msg || res.message)
            }
            this.spinning = false
          }).catch(err => {
            this.spinning = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    //返回
    handleBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped></style>
